<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/static/css/element-ui.css">
  </head>
  <body>
    <!--<div>https://shockerli.net/post/golang-pkg-http-file-server/</div>-->
    <div id="app" style="width: 60%;height: 100%;margin: 30px 20%;">
      <el-container>
        <el-header>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          </el-breadcrumb>
        </el-header>
        <el-main>


          <div style="text-align:right;">
            <el-button type="primary" @click="createProjectForm.visible = true">创建项目</el-button>
            <el-button type="primary" @click="createWorkflowForm.visible = true">创建工作流</el-button>
          </div>

          <div v-for="project in projects" :key="project.id">
            <el-divider content-position="left">${ project.name } - ${ project.description }</el-divider>

            <el-card class="box-card" v-for="workflow in project.workflows" style="display:inline-block; height: 300px; width: 22%;margin: 1%;">
              <div slot="header" class="clearfix">
                <h3 style="display:inline-block;margin: 0px;">${workflow.name}</h3>
                <a target="about:_blank" :href="'/history?workflow_id='+workflow.id"><el-button style="float: right; padding: 3px 0" type="text">历史记录</el-button></a>
              </div>
              <div style="margin: 30px 0px 0px 0px;">
                <el-button icon="el-icon-caret-right" circle @click="handleTrigger(workflow.id)"></el-button>
              </div>
            </el-card>
          </div>

        <el-dialog
          title="创建项目"
          :visible.sync="createProjectForm.visible"
          width="30%"
          :close="handleCancelProject">
          <el-form ref="createProjectForm" :model="createProjectForm" label-width="80px">
            <el-form-item label="项目名称">
              <el-input v-model="createProjectForm.name"></el-input>
            </el-form-item>
            <el-form-item label="项目描述">
              <el-input type="textarea" v-model="createProjectForm.description"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="handleCancelProject">取 消</el-button>
            <el-button type="primary" @click="handleCreateProject">确 定</el-button>
          </span>
        </el-dialog>

        <el-dialog
          title="创建工作流"
          :visible.sync="createWorkflowForm.visible"
          width="30%"
          :close="handleCancelWorkflow">
          <el-form ref="createWorkflowForm" :model="createWorkflowForm" label-width="80px">
            <el-form-item label="名字">
              <el-input v-model="createWorkflowForm.name"></el-input>
            </el-form-item>
            <el-form-item label="项目">
              <el-select v-model="createWorkflowForm.project_id" placeholder="请选择项目">
                <el-option v-for="project in projects" :key="project.id" :label="project.name" :value="project.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="DSL">
              <el-input type="textarea" v-model="createWorkflowForm.dsl"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="handleCancelWorkflow">取 消</el-button>
            <el-button type="primary" @click="handleCreateWorkflow">确 定</el-button>
          </span>
        </el-dialog>

        <el-dialog
          title="触发"
          :visible.sync="triggerForm.visible"
          width="30%">
          <el-form ref="triggerForm" :model="triggerForm">
            <el-form-item label="参数">
              <el-input type="textarea" v-model="triggerForm.input_params"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="triggerForm.visible=false">取消</el-button>
            <el-button @click="trigger">触发</el-button>
          </span>
        </el-dialog>

        </el-main>
      </el-container>
    </div>

    <script type="text/javascript" src="/static/js/vue.js"></script>
    <script type="text/javascript" src="/static/js/element-ui.js"></script>
    <script type="text/javascript" src="/static/js/axios.min.js"></script>
    <script type="text/javascript" src="/static/js/libs.js"></script>

    <script>
      var app = new Vue({
        delimiters: ['${', '}'],
        el: "#app",
        data: function(){
          return {
            createProjectForm: {
              visible: false,
              name: '',
              description: ''
            },
            createWorkflowForm: {
              visible: false,
              project_id: '',
              name: '',
              dsl: ''
            },
            triggerForm: {
              visible: false,
              workflow_id: '',
              input_params: ''
            },
            projects: []
          }
        },
        created: function(){
          this.fetchProjects()
        },
        methods: {
          fetchProjects(){
            axios.get("/api/projects").then(response => {
              this.projects = response.data
            })
          },
          handleCreateProject() {
            axios.post("/api/project", {
              name: this.createProjectForm.name,
              description: this.createProjectForm.description
            }).then(response => {
              this.createProjectForm.name = ''
              this.createProjectForm.description = ''
              this.createProjectForm.visible = false
              this.fetchProjects()
            }).catch(err =>{
              this.$notify.error({
                title: "错误",
                message: err
              })
            })
          },
          handleCancelProject() {
            this.createProjectForm.name = ''
            this.createProjectForm.description = ''
            this.createProjectForm.visible = false
          },
          handleCreateWorkflow() {
            axios.post("/api/workflow", {
              name: this.createWorkflowForm.name,
              dsl: this.createWorkflowForm.dsl,
              project_id: this.createWorkflowForm.project_id
            }).then(response => {
              this.createWorkflowForm.name = ''
              this.createWorkflowForm.dsl = ''
              this.createWorkflowForm.project_id = ''
              this.createWorkflowForm.visible = false
              this.fetchProjects()
            }).catch(err =>{
              this.$notify.error({
                title: "错误",
                message: err
              })
            })
          },
          handleCancelWorkflow() {
            this.createWorkflowForm.name = ''
            this.createWorkflowForm.dsl = ''
            this.createWorkflowForm.project = ''
            this.createWorkflowForm.visible = false
          },
          handleTrigger(id) {
            this.triggerForm.workflow_id = id
            this.triggerForm.visible = true
          },
          trigger() {
            axios.post("/api/trigger?id="+this.triggerForm.workflow_id,
              this.triggerForm.input_params).then(response =>{
              this.triggerForm.visible = false
            }).catch(err => {
              this.$notify.error({
                title: "成功",
                message: "触发任务"
              })
            })
          },
          getHistoryURL(url) {
            console.log(url)
            return "sssssssssssssssss"
          },
          handleSelect(key, keyPath) {
            // https://segmentfault.com/a/1190000040696839
            this.main_component = ()=>import("/static/html/project/workflow-list.vue")
            console.log(this.main_component)
            console.log("/static/html/project/workflow-list.vue")
            console.log(key, keyPath);
          }
        }
      })
    </script>

  </body>
</html>